<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
    <div class="h_layout_left" :style="{ 'width': leftFrameInfo.range + 'px' }">
        <div class="h_left_fold_button" v-if="leftFrameInfo.fold" @click="myStore.layoutHandel('LeftFold')">⬅️{{
            leftFrameInfo.label }}</div>
        <div class="h_left_fold_button" v-else @click="myStore.layoutHandel('LeftFold')">➡️</div>
        <div class="h_left_fold_frame">
            <NavigationLeftButton ></NavigationLeftButton>
            <NavigationLeftFoldFrame v-if="leftFrameInfo.fold"></NavigationLeftFoldFrame>
        </div>
    </div>
</template>

<script setup lang="ts">
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 引入存储
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
import { storeToRefs } from "pinia";
import { useEditorStore } from "@/store"; // 画布

/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 引入组件 
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
import { NavigationLeftButton } from "../NavigationLeftButton";
import { NavigationLeftFoldFrame } from "../NavigationLeftFoldFrame";
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 使用存储
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
const myStore = useEditorStore(); // 画布
/** 解构-画布 */
let { leftFrameInfo } = storeToRefs(myStore);

</script>

<style lang="scss" scoped>
.h_layout_left {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
    border-right: 1px solid rgb(100, 100, 100);
}

.h_left_fold_button {
    width: 100%;
    height: 23px;
    margin-bottom: 1px;
    text-align: end;
    color: rgb(0, 255, 255);
    user-select: none;
    font-size: 16px;

    &:hover {
        margin-bottom: 0px;
        border-bottom: 1px solid rgb(100, 100, 100);
        color: rgb(255, 255, 255);
    }
}

.h_left_fold_frame {
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
</style>@/store